<template>
  <div class="system-implementation">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="10" class="card-heard">
      <el-col :span="8">
        <div class="row-content">
          <span class="content-label">吸烟行为</span>
          <span class="content-value">33</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="row-content">
          <span class="content-label">火灾隐患</span>
          <span class="content-value">26</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="row-content">
          <span class="content-label">陌生人进入</span>
          <span class="content-value">51</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="chart-row">
      <el-col :span="12">
        <div class="chart-col">
          <span class="chart-title">吸烟行为检测</span>
          <div ref="helmetChart" class="chart-container"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-col">
          <span class="chart-title">火灾隐患检测</span>
          <div ref="clothesChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="chart-row">
      <el-col :span="12">
        <div class="chart-col">
          <span class="chart-title">陌生人进入人次</span>
          <div ref="violationTrendChart" class="chart-container"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-col">
          <span class="chart-title">违规行为汇总</span>
          <div ref="staffChangeChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "systemImplementation",
  data() {
    return {
      // 存储图表实例，用于后续销毁
      violationTrendChart: null, // 人员违规率趋势（折线图）
      staffChangeChart: null,    // 在岗人数变化（折线图）
      helmetChart: null,         // 安全帽佩戴情况（柱状图）
      clothesChart: null         // 安全服穿着情况（柱状图）
    };
  },
  mounted() {
    // DOM 渲染完成后初始化图表（确保容器存在）
    this.$nextTick(() => {
      this.initViolationTrendChart(); // 初始化折线图1
      this.initStaffChangeChart();    // 初始化折线图2
      this.initHelmetChart();         // 初始化柱状图1
      this.initClothesChart();        // 初始化柱状图2

      // 监听窗口 resize，图表自适应（可选）
      window.addEventListener('resize', this.handleChartResize);
    });
  },
  beforeDestroy() {
    // 组件销毁时销毁图表，避免内存泄漏
    this.destroyChart(this.violationTrendChart);
    this.destroyChart(this.staffChangeChart);
    this.destroyChart(this.helmetChart);
    this.destroyChart(this.clothesChart);

    // 移除窗口 resize 监听
    window.removeEventListener('resize', this.handleChartResize);
  },
  methods: {
    // 销毁图表实例
    destroyChart(chart) {
      if (chart && !chart.isDisposed()) {
        chart.dispose();
      }
    },
    // 图表自适应窗口变化
    handleChartResize() {
      this.violationTrendChart?.resize();
      this.staffChangeChart?.resize();
      this.helmetChart?.resize();
      this.clothesChart?.resize();
    },

    /**
     * 折线图1：人员违规率趋势
     */
    initViolationTrendChart() {
      const chartDom = this.$refs.violationTrendChart;
      this.violationTrendChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis', // 关键：按坐标轴触发，显示当前坐标轴上的所有数据
          backgroundColor: 'rgba(0, 11, 61, 0.9)', //  tooltip 背景色（与底色呼应，加深一点）
          borderColor: 'rgba(255, 255, 255, 0.2)', // 边框色（浅色透明，避免突兀）
          borderWidth: 1,
          textStyle: { color: '#fff' }, // 文字颜色（白色，适配深色背景）
          padding: 10, // 内边距
          axisPointer: {
            // 坐标轴指示器样式（鼠标悬停时的指示线/阴影）
            type: 'line', // 折线图用线指示器，柱状图可用'shadow'
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)' // 指示器线条颜色（浅色透明）
            }
          },
          // 自定义 tooltip 显示格式（可选，更清晰展示数据）
          // formatter: function(params) {
          //   // params 是当前坐标轴上的所有数据系列数组
          //   let res = `<div>${params[0].name}</div>`; // 第一行显示 x 轴名称（如日期）
          //   params.forEach(item => {
          //     // 后续行显示每个系列的名称和值（带单位）
          //     res += `<div>${item.seriesName}: ${item.value}${item.seriesName.includes('违规率') ? '%' : ''}</div>`;
          //   });
          //   return res;
          // }
        },
        // 图表背景色（与整体风格匹配：rgba(0,11,61,0.8) 深色底）
        // backgroundColor: 'rgba(0,11,61,0.5)',
        // 图表内边距
        grid: { left: '5%', right: '5%', bottom: '15%', top: '20%' },
        // 图例
        legend: {
          data: ['陌生人进入人次'],
          textStyle: { color: '#fff' } // 图例文字白色
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } }, // 轴线白色半透明
          axisLabel: { color: '#fff' } // 轴标签白色
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 5,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: {
            color: '#fff',
          },
          splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } // 网格线浅透明
        },
        series: [
          {
            name: '陌生人进入人次',
            type: 'line', // 折线图类型
            data: [2, 3, 5, 1, 5, 3, 3, 2, 2, 2, 3, 0, 3, 1, 1, 1, 1, 3, 1, 1, 0, 2, 2, 4],
            smooth: true, // 折线平滑
            lineStyle: { width: 3, color: '#52c41a' }, // 线条颜色（蓝色）
            itemStyle: { color: '#52c41a', borderColor: '#52c41a', borderWidth: 2 }, // 数据点样式
            // areaStyle: { color: 'rgba(64,158,255,0.2)' } // 填充区域半透明
          }
        ]
      };

      this.violationTrendChart.setOption(option);
    },

    /**
     * 折线图2：在岗人数变化
     */
    initStaffChangeChart() {
      const chartDom = this.$refs.staffChangeChart;
      this.staffChangeChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis', // 关键：按坐标轴触发，显示当前坐标轴上的所有数据
          backgroundColor: 'rgba(0, 11, 61, 0.9)', //  tooltip 背景色（与底色呼应，加深一点）
          borderColor: 'rgba(255, 255, 255, 0.2)', // 边框色（浅色透明，避免突兀）
          borderWidth: 1,
          textStyle: { color: '#fff' }, // 文字颜色（白色，适配深色背景）
          padding: 10, // 内边距
          axisPointer: {
            // 坐标轴指示器样式（鼠标悬停时的指示线/阴影）
            type: 'line', // 折线图用线指示器，柱状图可用'shadow'
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)' // 指示器线条颜色（浅色透明）
            }
          },
        },
        // backgroundColor: 'rgba(0,11,61,0.5)',
        grid: { left: '5%', right: '5%', bottom: '15%', top: '20%' },
        legend: { data: ['吸烟行为', '火灾隐患', '陌生人进入'], textStyle: { color: '#fff' } },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 5,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
        },
        series: [
          {
          name: '吸烟行为',
          type: 'line',
          data: [1, 0, 2, 2, 1, 2, 1, 1, 1, 0, 0, 2, 2, 1, 2, 3, 1, 1, 3, 2, 0, 1, 2, 2],
          smooth: true,
          lineStyle: { width: 3, color: '#722ed1' }, // 线条颜色（绿色）
          itemStyle: { color: '#722ed1', borderColor: '#722ed1', borderWidth: 2 },
          // areaStyle: { color: 'rgba(103,194,58,0.2)' }
        },
          {
            name: '火灾隐患',
            type: 'line',
            data: [1, 2, 2, 0, 0, 2, 1, 1, 2, 1, 0, 0, 1, 1, 1, 2, 0, 1, 1, 2, 2, 2, 0, 1],
            smooth: true,
            lineStyle: { width: 3, color: '#fa8c16' }, // 线条颜色（绿色）
            itemStyle: { color: '#fa8c16', borderColor: '#fa8c16', borderWidth: 2 },
            // areaStyle: { color: 'rgba(103,194,58,0.2)' }
          },
          {
            name: '陌生人进入',
            type: 'line',
            data: [2, 3, 5, 1, 5, 3, 3, 2, 2, 2, 3, 0, 3, 1, 1, 1, 1, 3, 1, 1, 0, 2, 2, 4],
            smooth: true,
            lineStyle: { width: 3, color: '#52c41a' }, // 线条颜色（绿色）
            itemStyle: { color: '#52c41a', borderColor: '#52c41a', borderWidth: 2 },
            // areaStyle: { color: 'rgba(103,194,58,0.2)' }
          }
        ]
      };

      this.staffChangeChart.setOption(option);
    },

    initHelmetChart() {
      const chartDom = this.$refs.helmetChart;
      this.helmetChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis', // 关键：按坐标轴触发，显示当前坐标轴上的所有数据
          backgroundColor: 'rgba(0, 11, 61, 0.9)', //  tooltip 背景色（与底色呼应，加深一点）
          borderColor: 'rgba(255, 255, 255, 0.2)', // 边框色（浅色透明，避免突兀）
          borderWidth: 1,
          textStyle: { color: '#fff' }, // 文字颜色（白色，适配深色背景）
          padding: 10, // 内边距
          axisPointer: {
            // 坐标轴指示器样式（鼠标悬停时的指示线/阴影）
            type: 'shadow', // 折线图用线指示器，柱状图可用'shadow'
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)' // 指示器线条颜色（浅色透明）
            }
          },
        },
        // backgroundColor: 'rgba(0,11,61,0.5)',
        grid: { left: '5%', right: '5%', bottom: '15%', top: '20%' },
        legend: {
          data: ['吸烟行为'],
          textStyle: { color: '#fff' },
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
        },
        series: [
          {
            name: '吸烟行为',
            type: 'bar', // 柱状图类型
            data: [1, 0, 2, 2, 1, 2, 1, 1, 1, 0, 0, 2, 2, 1, 2, 3, 1, 1, 3, 2, 0, 1, 2, 2],
            itemStyle: { color: '#722ed1' } // 合规绿色
          },
        ]
      };

      this.helmetChart.setOption(option);
    },

    /**
     * 柱状图2：安全服穿着情况
     */
    initClothesChart() {
      const chartDom = this.$refs.clothesChart;
      this.clothesChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis', // 关键：按坐标轴触发，显示当前坐标轴上的所有数据
          backgroundColor: 'rgba(0, 11, 61, 0.9)', //  tooltip 背景色（与底色呼应，加深一点）
          borderColor: 'rgba(255, 255, 255, 0.2)', // 边框色（浅色透明，避免突兀）
          borderWidth: 1,
          textStyle: { color: '#fff' }, // 文字颜色（白色，适配深色背景）
          padding: 10, // 内边距
          axisPointer: {
            // 坐标轴指示器样式（鼠标悬停时的指示线/阴影）
            type: 'shadow', // 折线图用线指示器，柱状图可用'shadow'
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)' // 指示器线条颜色（浅色透明）
            }
          },
        },
        // backgroundColor: 'rgba(0,11,61,0.5)',
        grid: { left: '5%', right: '5%', bottom: '15%', top: '20%' },
        legend: {
          data: ['火灾隐患'],
          textStyle: { color: '#fff' },
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
        },
        series: [
          {
            name: '火灾隐患',
            type: 'bar',
            data: [1, 2, 2, 0, 0, 2, 1, 1, 2, 1, 0, 0, 1, 1, 1, 2, 0, 1, 1, 2, 2, 2, 0, 1],
            itemStyle: { color: '#fa8c16' } // 合规蓝色
          },
        ]
      };

      this.clothesChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.system-implementation {
  padding: 10px; // 组件内边距，避免内容贴边
}

.card-heard {
  margin-bottom: 15px;

  .row-content {
    height: px2vh(78);
    background: #722ed1;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .content-value {
      font-family: Nunito Sans, Nunito Sans;
      font-weight: 700;
      font-size: px2font(20);
      color: #FFFFFF;
      line-height: px2vh(32);
      text-align: center;
    }

    .content-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: px2font(14);
      color: #FFFFFF;
      line-height: px2vh(22);
      text-align: center;
    }
  }
}

// 图表行样式：与顶部卡片拉开距离
.chart-row {
  margin-bottom: 15px;

  .chart-col {
    background: rgba(0,11,61);
  }

  // 图表标题样式
  .chart-title {
    display: inline-block;
    font-family: PingFang SC, PingFang SC;
    font-size: px2font(14);
    font-weight: 600;
    color: #fff;
    margin: 10px;
  }

  // 图表容器样式：必须设置高度，否则图表不显示
  .chart-container {
    width: 100%;
    height: 260px; // 图表高度（适配屏幕高度）
    border-radius: 8px; // 圆角与卡片统一
    overflow: hidden; // 避免图表超出容器
  }
}
</style>
